<template>
  <div id="inside">
    <p>最里层的组件</p>
    <input v-model="valueInside" @change="changeValue()" type="text">
  </div>
</template>
<script>
import bus from "./bus.js";
export default {
  name: "inside",
  components: {},
  data() {
    return {
      valueInside: ""
    };
  },
  methods: {
    changeValue: function(num) {
      bus.$emit("value", this.valueInside);
    }
  },
  beforeCreate() {
    //为了尽快收到消息，写在钩子函数最开始
    bus.$on("value", e => {
      this.valueInside = e;
      console.log("最内层组件接收到值");
    });
  },
  beforeDestroy() {
    bus.$off();
  }
};
</script>
<style scoped>
</style>